<template>
	<view>
		<view :style="{height: (navigationBarHeight + statusBarHeight) + 'rpx'}"></view>
		<!-- <view class="Top_box">
			<u-icon name="arrow-left" color="#FFF" size='30' style="margin-left: 54rpx;" @click="Goback()"></u-icon>
			<text class="wenben">详情</text>
			<view></view>
		</view> -->

		<view class="card">
			<view class="hang">
				<view class="icon" style="margin-left: 12rpx;"></view>
				<view class="icon" style="margin-right: 12rpx;"></view>
			</view>

			<view class="title">{{dataobj.grade_avg_title}}</view>
			<view class="notice">{{dataobj.grade_avg_notice}}</view>

			<view class="title">{{dataobj.grade_time_title}}</view>
			<view class="notice">{{dataobj.grade_time_notice}}</view>

			<view class="title">{{dataobj.grade_ys_title}}</view>
			<view class="notice">{{dataobj.grade_ys_notice}}</view>

			<view class="title">{{dataobj.yx_major}}</view>
			<view class="notice">{{dataobj.yx_major_notice}}</view>

			<view class="notice" style="margin-top: 40rpx;">{{dataobj.notice}}</view>

			<view class="charts-box" v-show="dataobj.schools.length > 0">
				<qiun-data-charts :canvas2d="true" type="line" :opts="opts" :chartData="chartData" :ontouch="true"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		report29,
		report399,
		report99
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				dataobj: {},

				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 55, // 导航栏高度

				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF"],
					padding: [15, 10, 0, 15],
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						itemCount: 2, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							unit: '%',
							tofix: 2,
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onLoad(option) {
			this.report = JSON.parse(option.report)
			this.currindex = option.currindex
			if (this.currindex == 0) {
				uni.showLoading({
					title: '加载中'
				});
				report29(this.report).then(res => {
					uni.hideLoading();
					this.dataobj = res.data.data
					let ret = {
						categories: this.datahandle(res.data.data.schools),
						series: [{
							name: "录取概率",
							lineType: "dash",
							data: this.handle(res.data.data.schools)
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(ret));
				})
			} else if (this.currindex == 1) {
				uni.showLoading({
					title: '加载中'
				});
				report399(this.report).then(res => {
					uni.hideLoading();
					this.dataobj = res.data.data
					let ret = {
						categories: this.datahandle(res.data.data.schools),
						series: [{
							name: "录取概率",
							lineType: "dash",
							data: this.handle(res.data.data.schools)
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(ret));
				})
			} else {
				uni.showLoading({
					title: '加载中'
				});
				report99(this.report).then(res => {
					uni.hideLoading();
					this.dataobj = res.data.data
					let ret = {
						categories: this.datahandle(res.data.data.schools),
						series: [{
							name: "录取概率",
							lineType: "dash",
							data: this.handle(res.data.data.schools)
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(ret));
				})
			}
		},
		onShow() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},

		methods: {
			Goback() {
				uni.navigateBack()
			},
			datahandle(val) {
				let arr = []
				for (let i = 0; i < val.length; i++) {
					let item = val[i]
					arr.push(item.name)
				}
				return arr
			},
			handle(val) {
				let arr = []
				for (let i = 0; i < val.length; i++) {
					let item = val[i]
					arr.push((Number(item.gl) * 100).toFixed(1))
				}
				return arr
			}
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100vh;
		overflow: scroll;
		background: #F7F7F8;
		background: url('https://img.wilmer.com.cn/admin/2024/3-20/d817b74a99e9ca58b29e70836d438f6a.png');
		background-size: 100% 100%;
		overflow-x: hidden;
		padding-bottom: 100rpx;
	}
</style>

<style lang="scss" scoped>
	.Top_box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.wenben {
			font-family: PingFang SC;
			font-size: 40rpx;
			font-weight: 400;
			color: #FFF;
		}
	}

	::v-deep .Top_box .u-icon--right {
		margin-left: 54rpx;
	}

	.card {
		width: 686rpx;
		border-radius: 12rpx;
		background: #FFF;
		margin: 30rpx auto 0;
		padding-top: 36rpx;
		padding-bottom: 200rpx;

		.hang {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				border: 1px solid #4D8BF8;
				background: #FFF;
			}
		}

		.title {
			margin-top: 10rpx;
			width: 572rpx;
			margin-left: 24rpx;
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.notice {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin: 0 28rpx;
		}
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>